<!--考试主页-->
<template>
    <div>
        <div class="container-fluid">
            <div class="row content">
                <div class="col-sm-3 sidenav text-center">
                    <h3 style="margin-top: 20px; margin-bottom: 30px;">考试页面</h3>
                    <div style="margin-bottom: 25px;">
                        <h2><small>考试进度</small></h2>
                        <el-progress :percentage="40.1" status="success"></el-progress>
                    </div>

                    <div class="text-decoration-none" style="margin-bottom: 1px;">
                        <div>
                            <el-button type="primary" plain @click="tellAns">提交试卷</el-button>
                            <el-button plain>呼叫老师</el-button>
                        </div>
                    </div>

                    <br>
<!--                    摄像头部分-->
                    <div v-if="false">
                        <Webcam></Webcam>
                    </div>
                </div>

                <div class="col-sm-9">
                    <!--                    考试信息部分-->
                    <div style="margin-top: 20px;">
                        <el-descriptions title="考试内容">
                            <el-descriptions-item label="考试名称">{{examInfo.examName}}</el-descriptions-item>
                            <el-descriptions-item label="考试班级">{{examInfo.className}}</el-descriptions-item>
                            <el-descriptions-item label="考试开始时间">{{examInfo.examStartTime}}</el-descriptions-item>
                            <el-descriptions-item label="考试时长">{{examInfo.examLimitTime}}分钟</el-descriptions-item>
                            <el-descriptions-item label="考试结束时间">{{examInfo.examEndTime}}</el-descriptions-item>
                            <el-descriptions-item label="考试总分">{{examInfo.totScore}}分</el-descriptions-item>
                            <el-descriptions-item label="考试介绍">{{examInfo.examDescription}}</el-descriptions-item>
                        </el-descriptions>
                    </div>
                    <h1><small>试题列表</small></h1>

                    <hr>

                    <!--                    以下是考试试题部分-->
                        <el-form v-loading="loading">
                            <div class="problem-list-part">

                                <div class="problem" v-for="(problem, problem_index) in problemList">
                                    <div>
                                        <h1 style="display: inline-block;"><small style="color: black;">{{problem_index + 1}}、{{problem.problemDescription}}</small></h1>
                                        <h5 style="display: inline-block; margin-left: 10px;"><span
                                                class="label label-success">{{problem.problemDiff}}</span> <span class="label label-primary">{{problem.problemTypeName}}</span>
                                        </h5>
                                        <h2 style="display: inline-block;"><small>（5分）</small></h2>
                                    </div>
                                    <div class="question" v-for="(question, question_index) in problem.questions">
                                        <h2 style="display: inline-block"><small style="color: black;">（{{question_index + 1}}）{{question.questionDescription}}</small>
                                        </h2>

                                        <br>

                                        <div class="problem-choice-part">
                                            <div>
                                                <h1 style="display: inline-block; color: #303133; margin-left: 10px; margin-right: 25px;">
                                                    <small>A.</small></h1>
                                                <el-radio v-model="ans1" label="0" border size="medium">0</el-radio>
                                            </div>
                                            <div>
                                                <h1 style="display: inline-block; color: #303133; margin-left: 10px; margin-right: 25px;">
                                                    <small>B.</small></h1>
                                                <el-radio v-model="ans1" label="1" border size="medium">1</el-radio>
                                            </div>
                                            <div>
                                                <h1 style="display: inline-block; color: #303133; margin-left: 10px; margin-right: 25px;">
                                                    <small>C.</small></h1>
                                                <el-radio v-model="ans1" label="2" border size="medium">2</el-radio>
                                            </div>
                                            <div>
                                                <h1 style="display: inline-block; color: #303133; margin-left: 10px; margin-right: 25px;">
                                                    <small>D.</small></h1>
                                                <el-radio v-model="ans1" label="3" border size="medium">3</el-radio>
                                            </div>
                                        </div>
                                    </div>
                                    <hr>
                                </div>
                            </div>
                        </el-form>




                </div>
            </div>
        </div>

        <footer class="container-fluid text-center" style="margin-top: 50px;">
            <p>Copyright © 2022 TTFE团队  版权所有 提供技术支持</p>
        </footer>
    </div>
</template>

<script>

    import Webcam from "../components/ToolComponents/Webcam";
    import {request} from "../api/request";

    export default {
        name: "PaperMain",
        components: {Webcam},
        data() {
            return {
                ans: [],
                loading: true,
                problemList: [],
                examInfo: {},
            }
        },
        methods: {
            tellAns() {
                window.alert(this.ans1);
            },
            getCurrentTime(date) {
                return new Date(date).format('yyyy-MM-dd hh:mm:ss');
            }
        },
        mounted() {
            let that = this;
            that.loading = true;
            request({
                url: "/student/exam/" + that.$route.params.id,
                method: 'post'
            }).then(function (data) {
                data = data.data;
                if(data.code === 200) {
                    data = data.data;
                    console.log(data);
                    that.examInfo = data;
                    that.examInfo.examStartTime = that.getCurrentTime(that.examInfo.examStartTime);
                    that.examInfo.examEndTime = that.getCurrentTime(that.examInfo.examEndTime);
                    that.problemList = data.problemList;
                    console.log(that.problemList);
                    that.loading = false;
                } else {
                    that.$message.error("试卷加载失败");
                    setTimeout(_ => {
                        that.$router.push('/student/index');
                    }, 1000);
                }
            }).catch(function (err) {
                that.$message.error("试卷加载失败");
                setTimeout(_ => {
                    that.$router.push('/student/index');
                }, 1000);
            });
        }
    }
</script>

<style scoped>
    .body-container {
        width: 100%;
        height: 100%;
    }

    .row.content {
        height: auto;
    }


    .sidenav {
        background-color: rgba(209, 211, 228, 0.18);
    }

    footer {
        background-color: #555;
        color: white;
        padding: 15px;
    }

    @media screen and (max-width: 767px) {
        .sidenav {
            height: auto;
            padding: 15px;
        }

        .row.content {
            height: auto;
        }
    }

    canvas {
        position: absolute;
    }
</style>